<template>
  <div class="box">
    <btnGroup @click-flush="flush"></btnGroup>
    <inpSearch
      placeholder="搜索关键字"
      v-model:input-search="inpValue"
    ></inpSearch>

    <!-- 表格 -->
    <baseTable
      apiUrl="/admin/base/sys/role/page"
      @click-delete="clickDelete"
      @change-info="changeInfo"
      ref="tableDom"
    >
      <template #default>
        <el-table-column type="selection" />
        <el-table-column
          v-for="(item, index) in key"
          :prop="item"
          :label="keyNameList[item]"
          :min-width="index >= 3 ? '165px' : '124px'"
          :align="'center'"
          style="background: #fff"
        >
        </el-table-column>
      </template>
    </baseTable>
  </div>
</template>

<script setup lang="ts">
import btnGroup from "@/components/btnGroup.vue"
import inpSearch from "@/components/inpSearch.vue"
import { reactive, ref } from "vue"
import baseTable from "@/components/baseTable.vue"

const tableDom = ref<{
  refresh: () => void
}>()

// 列名-列显示名 映射表
const keyNameList: any = reactive({
  name: "名称",
  label: "标识",
  remark: "备注",
  createTime: "创建时间",
  updateTime: "更新时间"
})

// 表标题键名
const key = Object.keys(keyNameList)

const inpValue = ref("")

function changeInfo(e:IRole) {
  console.log(e)
}

function clickDelete(e:IRole) {
  console.log(e)
}

function flush(){
  tableDom.value?.refresh()
}
</script>

<style lang="scss" scoped></style>
